<template>
	<view class="content">
		<downloadPop :file_path="file_path"></downloadPop>
		<view class="section-0">
			<view class="section-body">
				<view class="top-tab">
					<view class="form">
						<view class="form-item">
							<view class="label">方案名称</view>
							<view class="shape"></view>
							<view class="input">
								<u--input placeholderClass="input-placeholder" v-model="name" class="input-body"></u--input>
							</view>
						</view>
						<view class="actions">
							<view class="action" @click="handleResetForm()">
								<text>重</text>
								<text>置</text>
							</view>
							<view class="action search" @click="handleSearch()">
								<text>查</text>
								<text>询</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-2">
			<view class="table-container">
					<view class="header">
						<view class="item">序号</view>
						<view class="item">施工方案</view>
						<view class="item">下载</view>
					</view>
					<view class="body" v-for="(item, index) in list" :key="index" @click="handleDownLoad(item.file_path)">
							<view class="item">{{ index + 1 }}</view>
							<view class="item">{{ item.name }}</view>
							<view class="item">
								<view class="iconfont icon-xiazai"></view>
							</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import downloadPop from '@/components/download_pop/index.vue';
import { ConstructionPlanChildrenList } from '@/api/project_manage.js'
import { mapGetters } from 'vuex'
export default {
	components: { downloadPop },
	data() {
		return {
			file_path: '',
			name: '',
			id: '',
			list: []
		}
	},
	computed: {
		...mapGetters({
			curProject: 'system/getCurProject'
		})
	},
	methods: {
		handleDownLoad(url){
				this.file_path = '';
				setTimeout(() => {
					this.file_path = url;
				}, 0);
		},
		// 重置
		handleResetForm() {
			this.name = ''
			this.MeettingApi()
		},
		// 查询
		handleSearch() {
			if (this.id) {
				ConstructionPlanChildrenList({ project_id: this.id, name: this.name }).then(obj => {
					let data = obj.data.data
					this.list = data.data
				})
			} else {
				ConstructionPlanChildrenList({ project_id: this.curProject.id, name: this.name }).then(obj => {
					let data = obj.data.data
					this.list = data.data
				})
			}
		}
	},
	onLoad(options) {
		this.id = options.id
		this.handleSearch()
	}
}
</script>

<style lang="scss" scoped>
.content {
	.section-0 {
		width: 100%;
		background-color: #3a5df5;
		.section-body {
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding-top: 18rpx;
			.top-tab {
				width: 100%;
				.form {
					width: 100%;
					padding: 0 75rpx;
					padding-top: 40rpx;
					box-sizing: border-box;
					.form-item {
						width: 600rpx;
						height: 48rpx;
						border-radius: 20rpx;
						border: solid 2rpx #1534ce;
						margin: 0 auto;
						margin-bottom: 25rpx;
						&:last-child {
							margin-bottom: 34rpx;
						}
						@include clear();
						.label {
							float: left;
							width: 134rpx;
							height: 48rpx;
							text-align: center;
							line-height: 44rpx;
							font-size: 13px;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #1534ce;
						}
						.shape {
							width: 3rpx;
							height: 32rpx;
							background-color: #7f98ae;
							float: left;
							margin-top: 8rpx;
						}
						.input {
							float: left;
							width: calc(100% - 134rpx - 3rpx);
							.input-body {
								box-sizing: border-box;
								width: 100%;
								height: 44rpx;
								padding: 0 !important;
								border: none;
								padding-left: 30rpx !important;
								padding-right: 30rpx !important;
								font-size: 13px;
								font-weight: normal;
								font-stretch: normal;
								letter-spacing: 0rpx;
								color: rgba(0, 0, 0, 0.7);
							}
							.input-placeholder {
								font-size: 26rpx;
								font-weight: normal;
								font-stretch: normal;
								letter-spacing: 0rpx;
								color: rgba(0, 0, 0, 0.5);
							}
						}
					}
					.actions {
						width: 100%;
						height: 50rpx;
						margin-top: 29rpx;
						padding-bottom: 40rpx;
						display: flex;
						justify-content: space-between;
						.action {
							width: 288rpx;
							height: 48rpx;
							background-color: #395cf5;
							border-radius: 20rpx;
							text-align: center;
							line-height: 48rpx;
							font-size: 13px;
							font-weight: normal;
							font-stretch: normal;
							line-height: 48rpx;
							color: #ffffff;
							text {
								&:first-child {
									margin-right: 20rpx;
								}
							}
						}
						.search {
							background-color: #1534ce;
						}
					}
				}
			}
		}
	}
	.section-2 {
		width: 100%;
		// margin-top: 200rpx;
		.table-container {
			width: 100%;
			box-sizing: border-box;
			padding: 0 40rpx;
			overflow-x: auto;
			height: calc(100vh - 105rpx);
			margin-top: 25rpx;
			overflow: auto;
			.header {
				margin: 0 auto;
				width: 100%;
				padding: 30rpx 0;
				font-weight: bold;
				border-bottom: 2px solid #ebebeb;
				display: flex;
				.item {
					width: 33.3%;
					text-align: center;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 13px;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #3b3c40;
				}
			
			}
			.body {
				margin: 0 auto;
				width: 100%;
				font-weight: bold;
				border-bottom: 2px solid #ebebeb;
				display: flex;
					.item {
						margin-top: 22rpx;
						margin-bottom: 22rpx;
						width: 33.3%;
						text-align: center;
						font-size: 13px;
						flex-wrap: wrap;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #3b3c40;
					}
						.iconfont{
							display: inline-block;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 32rpx;
							transition: 0.2s ease;
							color:#2232B3 ;
						}
			}
		}
	}
}
</style>
